<template>
    <div
        class="a-line-header"
        :class="[
            `color-${color}`,
            `size-${size}`,
            { top: top },
            { right: right },
            { bottom: bottom },
            { left: left },
            `c-square-${size}`,
        ]"
    >
        <div class="item top" v-if="top"></div>
        <div class="item right" v-if="right"></div>
        <div class="item bottom" v-if="bottom"></div>
        <div class="item left" v-if="left"></div>
    </div>
</template>

<style lang="scss" scoped>
@use "sass:math";
@import "../scss/vars";

.a-line-header {
    display: inline-block;
    position: relative;

    @each $colorPackageName, $colorPackageValue in $colorPackages {
        $frontColor: map-get($colorPackageValue, "frontColor");
        $bgColor: map-get($colorPackageValue, "bgColor");
        &.color-#{$colorPackageName} {
            .item {
                background-color: $bgColor;
            }
        }
    }

    @each $sizePackageName, $sizePackageValue in $sizePackages {
        &.size-#{$sizePackageName} {
            $size: map-get($sizePackageValue, "size");

            $itemWidth: $size * 0.5;
            $lineWidth: 1px;
            $space: math.div($size, 2) - $itemWidth;

            .item {
                position: absolute;

                &.top {
                    width: $lineWidth;
                    height: $itemWidth;
                    top: $space;
                    left: math.div($size, 2) - math.div($lineWidth, 2);
                }
                &.right {
                    width: $itemWidth;
                    height: $lineWidth;
                    top: math.div($size, 2) - math.div($lineWidth, 2);
                    left: math.div($size, 2);
                }
                &.bottom {
                    width: $lineWidth;
                    height: $itemWidth;
                    top: math.div($size, 2);
                    left: math.div($size, 2) - math.div($lineWidth, 2);
                }
                &.left {
                    width: $itemWidth;
                    height: $lineWidth;
                    top: math.div($size, 2) - math.div($lineWidth, 2);
                    left: $space;
                }
            }
        }
    }
}
</style>

<script>
export default {
    props: {
        color: {
            type: String,
            default: 'default',
        },
        size: {
            type: String,
            default: 'm',
        },
        top: {
            type: Boolean,
            default: false
        },
        right: {
            type: Boolean,
            default: false
        },
        bottom: {
            type: Boolean,
            default: false
        },
        left: {
            type: Boolean,
            default: false
        },
    }
}
</script>